<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 600px;
			height: 100px;
			border: 1px solid gray;
		}
		p{
			float: left;
			text-align: center;
			line-height: 60px;
			width: 60px;
			height: 60px;
			background-color: #ccc;
			margin-right: 10px;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<h1 id="biaoti">哈哈</h1>
	<div id="box1">
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	</div>

	<script type="text/javascript">
		//碰到每个p的时候，就自己变红，别人都是灰色。离开p的时候，保持红色。
		var ps = document.getElementById("box1").getElementsByTagName("p");
		var biaoti = document.getElementById("biaoti");

		//事件监听只有onmouseover没有onmouseout
		//循环语句添加事件
		// for (var i = 0; i < ps.length; i++) {
		// 	//编号
		// 	ps[i].idx = i;
		// 	//监听
		// 	ps[i].onmouseover = function(){
		// 		//碰到每个p的时候，实际上是两件事儿
		// 		//第一件事儿，让所有人(包括自己)都变灰色
		// 		for(var j = 0 ; j < ps.length ; j++){
		// 			ps[j].style.backgroundColor = "#ccc";
		// 		}
		// 		//第二件事儿，让自己变红
		// 		this.style.backgroundColor = "red";
		// 		//第三件事儿，让h1里面的内容变为自己的序号
		// 		biaoti.innerHTML = this.idx;
		// 	}
		// }

		for(var i=0; i<ps.length;i++)
		{
			(function(i){
				ps[i].onmouseover = function(){
					for(var j = 0 ; j < ps.length ; j++){
						ps[j].style.backgroundColor = "#ccc";
						ps[j].innerText = null;
					}
				
					this.style.backgroundColor = "red";
					this.innerHTML = i ;
					biaoti.innerHTML = i;
				}
			})(i);
		}
	</script>
</body>
</html>